<template>
  <div class="page">
    <div class="main-wrap">
      <div class="main-box">
        <div class="box-top">
          <div class="select-box" @click="isShowMask=true;isShowChooseCoupon=true">
            <span class="selected">雅达利超级牛扒优惠券</span>
            <img src="../../assets/img/ic/down_calendar@2x.png" alt="">
          </div>
          <span class="record-btn" @click="toGrantRecord()">发放记录</span>
        </div>
        <div class="coupon-card">
          <div class="card-top">
            <div class="card-top-left">
              <span class="left-title">雅达利超级牛...优惠券</span>
              <span class="tip">使用有效期:&nbsp;1440分钟</span>
              <span class="tip">可发放期至:&nbsp;2020-09-13 00:00:00</span>
            </div>
            <div class="card-top-right">
              <span class="right-title">3小时免费</span>
              <span class="tip right-tip">时间券</span>
            </div>
          </div>
          <div class="card-middle">
            <div class="middle-left" :class="{'active':qrcodeTabChoose==1}" @click="qrcodeTabChoose=1">动态二维码</div>
            <div class="middle-right" :class="{'active':qrcodeTabChoose==2}" @click="qrcodeTabChoose=2">固定二维码</div>
          </div>
          <!-- 动态二维码 -->
          <div class="card-bottom" style="display:none;">
            <img src="../../assets/img/qrcode.png" alt="">
            <div class="text">
              <span class="num">剩余108张,&nbsp;</span>
              <span class="change-btn">换一张</span>
            </div>
          </div>
          <!-- 暂无固定二维码 -->
          <div class="card-bottom" style="display:none;">
            <span class="no-qrcode-tip">暂无固定二维码，请先添加分组</span>
          </div>
          <!-- 固定二维码-已有分组 -->
          <div class="card-bottom">
            <span class="group-name">分组名称A</span>
            <span class="time-tip">2018-10-19 15:45:20过期</span>
            <img src="../../assets/img/qrcode.png" alt="">
            <div class="text">
              <span class="num">剩余108张,&nbsp;</span>
              <span class="change-btn">换一张</span>
            </div>
          </div>

          <div class="group-btn-box" v-if="qrcodeTabChoose=='2'">
            <button @click="showMaskForm=true">删除分组</button>
            <button @click="isShowMask=true;isShowAddGroupFrame=true">添加分组</button>
            <button @click="isShowMask=true;isShowChooseGroupFrame=true">选择分组</button>
          </div>
        </div>
        <div class="excessive">
          <img src="../../assets/img/line_left_coupon@2x.png" alt="">
          <span class="middle-text">或输入车牌号码发券</span>
          <img src="../../assets/img/line_right_coupon@2x.png" alt="">
        </div>
        <div class="keyboard-box">
          <img src="../../assets/img/ic/keyboard_normal@2x.png" alt="">
          <input type="text" placeholder="请输入发放的车牌号码" @focus="toSoftDisk()" v-model="carLicenseNum">
          <div class="grant-btn" :class="{'btn-disabled':carLicenseNum==''}">发券</div>
        </div>
      </div>
    </div>
    <div class="mask-box" v-show="isShowMask"></div>
    <!-- 选择分组的弹框 -->
    <transition name="slide-fade">
      <div class="choose-group-frame" v-show="isShowChooseGroupFrame">
        <div class="item vux-1px-b">
          <span class="group-name">分组名称A</span>
          <span class="num-tip">(100张)</span>
          <img src="../../assets/img/ic/select@2x.png" alt="">
        </div>
        <div class="item vux-1px-b">
          <span class="group-name">分组名称B</span>
          <span class="num-tip">(100张)</span>
          <!-- <img src="../../assets/img/ic/select@2x.png" alt=""> -->
        </div>
        <div class="item vux-1px-b">
          <span class="group-name">分组名称C</span>
          <span class="num-tip">(100张)</span>
          <!-- <img src="../../assets/img/ic/select@2x.png" alt=""> -->
        </div>
        <div class="cancel-btn-box vux-1px-t" @click="isShowMask=false;isShowChooseGroupFrame=false">取消</div>
      </div>
    </transition>
    <!-- 添加分组弹框 -->
    <transition name="slide-fade">
      <div class="add-group-frame" v-show="isShowAddGroupFrame">
        <div class="add-item-header vux-1px-b">
          <span>添加分组</span>
          <img src="../../assets/img/ic/close_popup@2x.png" alt="" @click="isShowAddGroupFrame=false;isShowMask=false">
        </div>
        <div class="add-item vux-1px-b">
          <span>组名称:</span>
          <input class="input-group-name" type="text" placeholder="请输入优惠券分组名称">
        </div>
        <div class="add-item vux-1px-b">
          <!-- <span>有效开始时间:</span>
          <span class="choose-datetime">2018-10-19 09:01</span>
          <img src="../../assets/img/ic/down_calendar@2x.png" alt=""> -->
          <group>
            <datetime v-model="startDateTime" :format='format' title="有效开始时间"></datetime>
          </group>
        </div>
        <div class="add-item vux-1px-b">
          <span>有效结束时间:</span>
          <span class="choose-datetime">2018-10-19 09:01</span>
          <img src="../../assets/img/ic/down_calendar@2x.png" alt="">
        </div>
        <div class="add-item vux-1px-b">
          <span>总数:</span>
          <input class="input-total" type="text" placeholder="请输入要生成的券数量">
        </div>
        <div class="add-btn-box">添加</div>
      </div>
    </transition>
    <!-- 选择优惠券 -->
    <transition name="slide-fade">
      <div class="choose-coupon" v-show="isShowChooseCoupon">
        <div class="coupon-item vux-1px-b">
          <span class="coupon-name">2小时优惠券</span>
          <span class="text-tip">(免费停车2小时)</span>
          <img src="../../assets/img/ic/select@2x.png" alt="">
        </div>
        <div class="coupon-item vux-1px-b">
          <span class="coupon-name">2小时优惠券</span>
          <span class="text-tip">(免费停车2小时)</span>
          <img src="../../assets/img/ic/select@2x.png" alt="">
        </div>
        <div class="coupon-item vux-1px-b">
          <span class="coupon-name">2小时优惠券</span>
          <span class="text-tip">(免费停车2小时)</span>
          <img src="../../assets/img/ic/select@2x.png" alt="">
        </div>
        <div class="footer-btn vux-1px-t" @click="isShowMask=false;isShowChooseCoupon=false">取消</div>
      </div>
    </transition>
    <!-- 删除分组 -->
    <MaskForm v-show="showMaskForm" :layerHeadTitle="layerHeadTitle" :layerBodyTip="layerBodyTip" @sureBtnEvent="sureBtnEvent" @closeMaskForm="showMaskForm=false"></MaskForm>
  </div>
</template>

<script>
  import MaskForm from '@/components/MaskForm'
  import { Group,Datetime } from 'vux'
  export default {
    components:{
      MaskForm,Group,Datetime
    },
    data(){
      return{
        title: '发放优惠券',
        isShowMask: false, //是否显示遮罩
        isShowChooseCoupon: false, //是否显示选择优惠券弹框
        isShowChooseGroupFrame: false, //是否显示选择分组弹框
        isShowAddGroupFrame: false, //是否显示添加分组弹框
        qrcodeTabChoose: 1, //(二维码tab 1:动态二维码; 2:固定二维码)
        showMaskForm: false, //显示是否删除分组弹框
        layerHeadTitle: '删除分组',
        layerBodyTip: '确认删除分组名称A吗？',
        carLicenseNum: '', //车牌号码
        startDateTime: '', //有效开始时间
        format: 'YYYY-MM-DD HH:mm',
      }
    },
    created(){
      this.carLicenseNum = this.$route.query.carLicenseNum ? this.$route.query.carLicenseNum : ''
      this.$store.commit('setTitle',this.title)
      this.$store.commit('setShowCloseBtn',false)
    },
    methods:{
      sureBtnEvent(){

      },
      toSoftDisk(){ //软键盘
        this.$router.push({path:'/softDisk'})
      },
      toGrantRecord(){ //发放记录
        this.$router.push({path:'/grantRecord'})
      },

    }
  }
</script>


<style lang="less" scoped>
.main-wrap{
  padding: 0px 40px;
  margin-top: 27px;
  .main-box{
    .box-top{
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      .select-box{
        span{
          font-size: 28px;
          color: #696969;
        }
        img{
          height: 48px;
          width: 48px;
        }
      }
      .record-btn{
        font-size: 28px;
        color: #696969;
      }
    }
    .coupon-card{
      height: 833px;
      margin-top: 28px;
      background: #FFFFFF;
      box-shadow: 0 3px 14px 0 rgba(0,0,0,0.08);
      .card-top{
        display: flex;
        justify-content: space-between;
        background: url('../../assets/img/bg_yellow_coupon@2x.png') no-repeat 0px 0px;
        background-size: contain;
        height: 190px;
        padding: 0% 4%;
        .card-top-left,.card-top-right{
          display: flex;
          flex-direction: column;
        }
        .card-top-left{
          justify-content:center; //垂直居中对齐
        }
        span{
          &.left-title{
            font-size: 34px;
            line-height: 34px;
            color: #FFFFFF; 
          }
          &.right-title{
            font-size: 46px;
            color: #ffffff;
            letter-spacing: 1.11px;
            line-height: 65px;
            margin-top: 15px;
          }
          &.tip{
            font-size: 24px;
            color: rgba(255,255,255,0.78);
            letter-spacing: 1px;
            line-height: 24px;
            margin-top: 20px;
            &.right-tip{
              margin-top: 10px;
            }
          }
        }
      }
      .card-middle{
        height: 70px;
        display: flex;
        border-bottom: 2px dashed #e1e1e1;
        .middle-left,.middle-right{
          height: 70px;
          line-height: 70px;
          flex-grow: 1;
          text-align: center;
          font-size: 30px;
          color: #696969;
          letter-spacing: 1px;
          &.active{
            color: #1875ED;
          }
        }
      }
      .card-bottom{
        height: 490px;
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
        img{
          width: 320px;
          height: 320px;
        }
        .text{
          text-align: center;
          line-height: 28px;
          margin-top: 10px;
          .num{
            font-size: 26px;
            color: #181818;
            letter-spacing: 0;
          }
          .change-btn{
            font-size: 26px;
            color: #527EB7;
          }
        }
        .no-qrcode-tip{ //无固定二维码提示
          font-size: 28px;
          color: #262626;
        }
        .group-name{ //分组名称
          font-size: 32px;
        }
        .time-tip{ //有效期时间提示
          color: #ABABAB;
          font-size: 26px;
        }
      }
      .group-btn-box{
        border-top: 2px dashed #e1e1e1;
        height: 80px;
        line-height: 80px;
        text-align: right;
        button{
          width: 142px;
          height: 54px;
          border: 2px solid #4F4F4F;
          border-radius: 4px;
          margin-right: 30px;
          font-size: 26px;
          color: #4F4F4F;
          background-color: #ffffff;
          &.disabled{
            background: #F4F4F4;
            border: 2px solid #D3D3D3;
            font-size: 26px;
            color: #ABABAB;
            letter-spacing: 1px;
          }
        }
      }
    }
    .excessive{
      margin-top: 40px;
      height: 40px;
      // border: 1px solid red;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items:center;
      .middle-text{
        font-size: 26px;
        color: #ABABAB;
        letter-spacing: 1px;
        line-height: 26px;
      }
      img{
        width: 27%;
        height: 6px;
      }
    }
    .keyboard-box{
      margin-top: 20px;
      height: 100px;
      background: #FFFFFF;
      box-shadow: 0 3px 14px 0 rgba(0,0,0,0.08);
      display: flex;
      justify-content: space-between;
      padding: 10px;
      img{
        width: 72px;
        height: 72px;
      }
      input{
        width: 55%;
        font-size: 30px;
      }
      input::-webkit-input-placeholder { 
        color:#262626;
        opacity: 0.36;
      }
      .grant-btn{
        width: 190px;
        line-height: 80px;
        align-self: right;
        text-align: center;
        border-left: 2px solid #dfdfdf;
        font-size: 34px;
        color: #1875ED;
        letter-spacing: 1px;
        &.btn-disabled{
          color: #ABABAB;
        }
      }
    }
  }
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
.mask-box{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: @maskColor;
  z-index: 10;
}
.choose-group-frame{
  position: absolute;
  bottom: 0;
  height: 600px;
  width: 100%;
  z-index: 20;
  background: #ffffff;
  .item{
    height: 100px;
    line-height: 100px;
    // border: 1px solid red;
    position: relative;
    padding: 0px 20px;
    img{
      position: absolute;
      top: 50%;
      right: 20px;
      margin-top: -24px;
      width: 48px;
      height: 48px;
    }
    .group-name{
      font-size: 32px;
      color: #262626;
    }
    .num-tip{
      font-size: 28px;
      color: #ABABAB;
      margin-left: 5px;
    }
  }
  .cancel-btn-box{
    width: 100%;
    height: 100px;
    line-height: 100px;
    background: #ffffff;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-size: 34px;
    color: #686868;
    letter-spacing: 1.1px;
  }
}
.add-group-frame{
  position: absolute;
  bottom: 0;
  height: 698px;
  width: 100%;
  z-index: 20;
  background: #ffffff;
  .add-item-header{
    height: 90px;
    line-height: 90px;
    position: relative;
    span{
      text-align: center;
      display: block;
    }
    img{
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -24px;
      width: 48px;
      height: 48px;
    }
  }
  .add-item{
    height: 100px;
    line-height: 100px;
    padding-left: 30px;
    span{
      font-size: 32px;
      color: #262626;
    }
    img{
      width: 54px;
      height: 54px;
      margin-left: 15px;
    }
    .input-group-name{
      margin-left: 116px;
      font-size: 32px;
    }
    .choose-datetime{
      margin-left: 20px;
    }
    .input-total{
      margin-left: 148px;
      font-size: 32px;
    }
  }
  .add-btn-box{
    margin: 70px 30px 0 30px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    background: #1875ED;
    border-radius: 10px;
    font-size: 34px;
    color: #FFFFFF;
    letter-spacing: 1.1px;
  }
}
.choose-coupon{
  position: absolute;
  height: 600px;
  width: 100%;
  bottom: 0;
  z-index: 20;
  background: #ffffff;
  .coupon-item{
    height: 100px;
    line-height: 100px;
    padding-left: 30px;
    position: relative;
    .coupon-name{
      font-size: 32px;
      color: #262626;
    }
    .text-tip{
      font-size: 28px;
      color: #ABABAB;
      margin-left: 5px;
    }
    img{
      width: 48px;
      height: 48px;
      position: absolute;
      right: 30px;
      top: 50%;
      margin-top: -24px;
    }
  }
  .footer-btn{
    position: absolute;
    bottom: 0;
    height: 100px;
    line-height: 100px;
    width: 100%;
    text-align: center;
    font-size: 34px;
    color: #686868;
    letter-spacing: 1.1px;
  }
}
</style>
